#!/usr/bin/env python
# -*- coding: utf-8 -*-

from common import caller
    
def print_form():
    print '''
    <div class="container" style="padding: 30px 15px 0;">
        <form action="http://localhost/cgi-bin/list.py" class="form-horizontal"  role="form">
            <fieldset>
            <div class="row">
                   <div class="col-sm-4">
                    <label for="date" class="col-md-2 control-label">Date</label>
                    <div class="input-group date form_date col-md-10" data-date="" data-date-format="yyyymmdd" data-link-field="date" data-link-format="yyyymmdd">
                        <input class="form-control" size="16" type="text" value="" readonly>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                    <input type="hidden" id="date" value="" name="date"/>
                </div>
                <div class="col-sm-4">
                       <button type="submit" class="btn btn-primary">Search</button>
                   </div>
            </div>
            </fieldset>
        </form>
    </div>
    <br/>
    '''
def print_table(date):
    html_str = '''
    <div class="container">
        <!-- Example row of columns -->
          <div class="row">
            <div class="col-sm-4">
                  <div class="list-group">
                    <a class="list-group-item active">
                      %s Top 20
                    </a>
    ''' % date
    counter = 1
    label = ''
    for item in caller.get_top_by_date(date, 20):
        if counter in range(1, 4):
            label = 'label-danger'
        elif counter in range(4, 11):
            label = 'label-warning'
        else:
            label = 'label-info'
        html_str += '''
                    <a class="list-group-item" href="http://localhost/cgi-bin/detail.py?date=%s&topic=%s&top=%s" target="_blank">
                        <span class="label %s">%s</span> %s 
                    </a>
        ''' % (date, item[0], str(counter).zfill(2), label, str(counter).zfill(2), item[0])
        counter += 1
        
    html_str += '''
                  </div>
            </div><!-- /.col-sm-4 -->
    '''
    print html_str
    
def print_graph():
    print '''
    <div class="col-sm-8">
                  <div class="col">
                    <div class="row-sm-4">
                          <div class="panel panel-info">
                            <div class="panel-heading">
                              <h3 class="panel-title">Hot Topic Frequence</h3>
                            </div>
                          </div>
                        <canvas id="barchart"></canvas>
                        <div id="barchart-legend"></div>
                    </div>
                    <div style="height:80px;"></div>
                    <div class="row-sm-4">
                          <div class="panel panel-info">
                            <div class="panel-heading">
                              <h3 class="panel-title">Total Tweets</h3>
                            </div>
                          </div>
                        <canvas id="piechart"></canvas>
                        <div id="piechart-legend"></div>
                    </div>
                  </div>
            </div><!-- /.col-sm-8 -->
        </div>
        
    </div><!-- /container -->
    '''

def print_script(date):
    l = caller.get_top_by_date(date, 20)
    html = '''
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../bootstrap-3.3.5/js/bootstrap.min.js"></script>

    <!-- Datetime ======================================================================================= -->
    <script type="text/javascript" src="../bootstrap-3.3.5/datetime/jquery-1.8.3.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../bootstrap-3.3.5/datetime/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript">
        $('.form_date').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        });
    </script>
    
    <!-- Charts ======================================================================================= -->
    <script type="text/javascript" src="../Chart.js.1.2/Chart.js"></script>
    <!-- Pie Chart -->
    <script type="text/javascript">
    var pieData = [
        {
            value: 600,
            color:"#F7464A",
            highlight: "#FF5A5E",
            label: "Original"
        },
        {
            value: 50,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Retweet"
        }

    ];

    <!-- Bar Chart -->
    
    var barChartData = {
        labels : [%s],
        datasets : [
            {
                label : "Total",
                fillColor : "rgba(51,122,183,0.5)",
                strokeColor : "rgba(51,122,183,0.8)",
                highlightFill : "rgba(51,122,183,0.75)",
                highlightStroke : "rgba(51,122,183,1)",
                data : [%s]
            }
            
        ]

    }
    ''' % (caller.list_to_string_by_col(l, 0), caller.list_to_string_by_col(l, 1))
    html +=  '''
    window.onload = function(){
        var ctx1 = document.getElementById("piechart").getContext("2d");
        myPie = new Chart(ctx1).Pie(pieData, {
            "legendTemplate" : '<ul style=\"list-style-type: none;\"><% for (var i=0; i<segments.length; i++){%><li style=\"display: inline;margin-right:8px;\"><span style=\"height:3px;width:3px;background-color:<%=segments[i].fillColor%>\">&nbsp;&nbsp&nbsp;&nbsp&nbsp;</span>&nbsp;<%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
        });
        var piechart_legend = myPie.generateLegend();
          $('#piechart-legend').append(piechart_legend);
          
        var ctx = document.getElementById("barchart").getContext("2d");
        myBar = new Chart(ctx).Bar(barChartData, {
            "responsive" : true,
            "legendTemplate" : '<ul style=\"list-style-type: none;\"><% for (var i=0; i<datasets.length; i++){%><li style=\"display: inline;margin-right:8px;\"><span style=\"height:3px;width:3px;background-color:<%=datasets[i].strokeColor%>\">&nbsp;&nbsp&nbsp;&nbsp&nbsp;</span>&nbsp;<%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
        });
        var barchart_legend = myBar.generateLegend();
          $('#barchart-legend').append(barchart_legend);
    }    
     
    </script>
    ''' 
    print html